<template>
	<view class="userInfoForm">
		<view class="avatar">
			<view class="title">
				头像
			</view>
			<view class="info">
				<image :src="userInfo.headImg" class="avatar-img" @click="updateAvatar()"></image>
			</view>
		</view>
		<view class="nickname" @click="updateNickname()">
			<view class="title">
				昵称
			</view>
			<view class="info name">
				<text>{{userInfo.nickname}}</text>
			</view>
		</view>

		<view class="phone">
			<view class="title ">
				手机号
			</view>
			<view class="info tel">
				{{userInfo.phone}}
			</view>
		</view>

		<view class="gender">
			<view class="title">
				性别
			</view>
			<view class="info tofull" @click="updateGender()">
				<text v-if="!userInfo.sex">去完善</text>
				<text v-else>{{userInfo.sex=='1'?'男':'女'}}</text>
			</view>
		</view>
		<!-- 编辑用户昵称组件 -->
		<edit-nickname :isShow="isShow" @onCancel="closeEditIpt"></edit-nickname>

		<!-- 更新性别 -->
		<view @click="hideHandler" class="mask" v-if="hideGender">
			<view class="gender-box">
				<view class="male" @click="selectMale">男</view>
				<view class="female" @click="selectFemale">女</view>
				<view class="cancle" @click.stop="hideHandler">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	var COS = require('cos-wx-sdk-v5');
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				isShow: false,
				hideGender: false,
				sex: '',
				openid: ''
			};
		},
		onLoad() {
			this.openid = uni.getStorageSync('openId')
		},
		onShow() {
			this.getUserData()
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			// 更新用户信息
			async getUserData() {
				const {
					data: res
				} = await uni.$http.post('/user/getUserData', {
					openid: uni.getStorageSync('openId'),
					phone: uni.getStorageSync('phone'),
					nickname: this.userInfo.nickname,
					headImg: this.userInfo.headImg
				})
				console.log(res, 2)
				this.updateUserInfo(res.data)
			},


			// 更换头像
			updateAvatar() {
				var that = this
				var cos = new COS({
					SecretId: 'AKIDSjl01lcPM6ZlkPeyswylHWjyxg9Vs60d',
					SecretKey: 'YrtWxDCtO7amgjW8VfdNr4z4PVKr9BvN',
				});
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: function(res) {
						var filePath = res.tempFiles[0].path;
						var filename = filePath.substr(filePath.lastIndexOf('/') + 1);
						cos.postObject({
								Bucket: 'qinqin-1305705433',
								Region: 'ap-nanjing',
								Key: 'qinqin/XcxHead' + filename,
								FilePath: filePath,
								onProgress: function(info) {
									// console.log(JSON.stringify(info));
								}
							},
							
						).then(res => {
							console.log(res)
							setTimeout(function() {
								that.updateUserAvatar(res.headers.location)
								that.getUserData()
							}, 10);
							// 
						});
					}
				})

			},
			// 更改用户信息
			async updateUserAvatar(url) {
				const {
					data: res
				} = await uni.$http.post('/user/updateUserBase', {
					userId: this.userInfo._id,
					headImg: url
				})
				console.log(res, 1)
			},
			// 修改昵称
			updateNickname() {
				uni.navigateTo({
					url: '/subpkg/updateNickname/updateNickname'
				})
			},
			// 更新性别
			updateGender() {
				this.hideGender = !this.hideGender
			},
			hideHandler() {
				this.getUserData()
				this.hideGender = false
			},
			async selectMale() {
				const {
					data: res
				} = await uni.$http.post('/user/updateUserBase', {
					userId: this.userInfo._id,
					sex: '1'
				})
				if (res.success == '0') {
					uni.$showMsg('性别更新成功!')
					this.userInfo.sex = '1'
				}
			},
			async selectFemale() {
				const {
					data: res
				} = await uni.$http.post('/user/updateUserBase', {
					userId: this.userInfo._id,
					sex: '0'
				})
				if (res.success == '0') {
					uni.$showMsg('性别更新成功!')
					this.userInfo.sex = '0'
				}
			},
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .6);
		display: flex;
		align-items: flex-end;
		align-content: center;
	}

	.gender-box {
		height: 348rpx;
		width: 100%;
		background-color: #DCDCDC;
		border-radius: 40rpx 40rpx 0 0;
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		text-align: center;
		z-index: 999;

		.male {
			height: 110rpx;
			line-height: 110rpx;
			border-bottom: 1rpx solid #dcdcdc;
			background-color: #fff;
		}

		.female {
			line-height: 110rpx;
			height: 110rpx;
			background-color: #fff;
		}

		.cancle {
			line-height: 110rpx;
			height: 110rpx;
			margin-top: 16rpx;
			background-color: #fff;
		}
	}

	.gender-ipt {
		text-align: right;
	}

	.userInfoForm {
		line-height: 105rpx;
		padding-left: 24rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #dcdcdc;

		.avatar {
			height: 105rpx;
			display: flex;

		}

		.title {
			width: 120rpx;
		}

		.info {
			width: 633rpx;
			border-bottom: 1rpx solid #f0f0f0;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 25rpx;
			box-sizing: border-box;

			.avatar-img {
				width: 83rpx;
				height: 83rpx;
				// background: #B09A9A;
				border-radius: 50%;
				vertical-align: middle;
			}

			&.name {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}

			&.tel {
				font-size: 26rpx !important;
				font-weight: 400;
				color: #999999 !important;
			}

			&.tofull {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}

		.nickname {
			height: 105rpx;
			display: flex;
		}

		.phone {
			height: 105rpx;
			display: flex;
		}

		.gender {
			height: 105rpx;
			display: flex;
		}
	}
</style>
